<form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">

    <div id="app" v-clock>
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">{:__('Type')}:</label>
            <div class="col-xs-12 col-sm-8">
                <select  id="c-type" data-rule="required" class="form-control selectpicker" name="row[type]" @change="changeType()">
                    {foreach name="typeList" item="vo"}
                        <option value="{$key}" {in name="key" value="1"}selected{/in}>{$vo}</option>
                    {/foreach}
                </select>
            </div>
        </div>

        <div class="form-group" v-if="type == 1">
            <label class="control-label col-xs-12 col-sm-2">{:__('User_id')}:</label>
            <div class="col-xs-12 col-sm-8">
                <input id="c-user_id" data-rule="required" data-source="xyvenue/user/user/index" data-field="nickname" class="form-control selectpage" name="row[user_id]" type="text" value="">
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">{:__('Store_id')}:</label>
            <div class="col-xs-12 col-sm-8">
                <div class="flex">
                    <input type="hidden" class="form-control" name="row[store_id]" v-model="storeInfo.id">
                    <input type="text" readonly class="form-control" v-model="storeInfo.name" placeholder="点击右侧按钮选择场馆">
                    <div @click="selectStore()" class="btn btn-success"><i class="fa fa-bars"></i> 选择 </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">{:__('Venue_id')}:</label>
            <div class="col-xs-12 col-sm-8">
                <div class="flex">
                    <input type="hidden" class="form-control" name="row[venue_id]" v-model="venueInfo.id">
                    <input type="text" readonly class="form-control" v-model="venueInfo.name" placeholder="点击右侧按钮选择场地">
                    <div @click="selectVenue()" class="btn btn-success"><i class="fa fa-bars"></i> 选择 </div>
                </div>
            </div>
        </div>
        
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">{:__('Area')}:</label>
            <div class="col-xs-12 col-sm-8 flex flex-wrap">
                <div v-for="(s, k) in areaList" :class="'area-item ' + (s.isSelect?'active':'')" @click="areaSelect(k)">
                    {{s.name}}
                </div>
            </div>

            <input id="arealist" name="row[arealist]" type="hidden" />
        </div>

        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">{:__('Time')}:</label>
            <div class="col-xs-12 col-sm-8 flex flex-wrap" v-if="timeList.length > 0">
                <div v-for="(s, k) in timeList" :class="'area-item ' + (s.isSelect?'active':'')" @click="timeSelect(k)">
                    {{s.time}}
                </div>
            </div>
            <input id="timelist" name="row[timelist]" type="hidden" />
        </div>

        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">{:__('Startdate')}:</label>
            <div class="col-xs-12 col-sm-8">
                <input id="c-startdate" data-rule="required" class="form-control datetimepicker" data-date-format="YYYY-MM-DD" data-use-current="true" name="row[startdate]" type="text" value="{:date('Y-m-d')}">
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">{:__('Enddate')}:</label>
            <div class="col-xs-12 col-sm-8">
                <input id="c-enddate" data-rule="required" class="form-control datetimepicker" data-date-format="YYYY-MM-DD" data-use-current="true" name="row[enddate]" type="text" value="{:date('Y-m-d')}">
            </div>
        </div>

    </div>
    
    <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <button type="submit" class="btn btn-primary btn-embossed disabled">{:__('OK')}</button>
        </div>
    </div>
</form>

<style>
    [v-clock] {display: none;}
    .flex{display: flex;}
    .flex-wrap{flex-wrap: wrap;}
    .area-item{height: 34px;line-height: 34px;border: solid 1px #d2d6de;border-radius: 3px;margin-right: 20px;padding:0 30px;margin-bottom: 15px;}
    .area-item.active{border-color: red;}
</style>